import React, { Component } from 'react'
import {bindActionCreators} from "redux"
import * as action from "../action/index.js"
import {connect} from "react-redux" //将仓库数据提供给组件
const Style = {
    "flex":"1",
}
 class Shopcar extends Component {
    // 购物车++
    addNum(id){
        // console.log(this.props,77777777)
       this.props.addnum(id)
    }
    // 购物车--
    del(id){
        this.props.Del(id)
    }
    // 购物车控制每一项的选中与不选中
    checkItem(id){
      this.props.checkitem(id)
    }
    // 购物车全选的事件
    checkAll(){
        this.props.checkall()
    }
  render() {
    let checkeitem = this.props.shopArr.filter((item,index)=>{ // checkeitem checkbox框选中得
        return item.checked
    })
    let addNum = checkeitem.reduce((a,b)=>{
        return a+ b.price*b.number
    },0)
    return (
      <div style={Style}>
          {
              this.props.shopArr.length? this.props.shopArr.map((item,index)=>{
                  return <div key={index} style={{marginBottom:"30px"}}>
                      <img src={item.img} alt="" />
                      <span>价格:{item.price}</span>
                      <h4>商品名称：{item.title}</h4>
                      {/* <span>商品名{item,title}</span> */}
                      <input type="checkbox" checked={item.checked || ""} onChange={this.checkItem.bind(this,item.id)}/>
                      <button onClick={this.del.bind(this,item.id)}>--</button>
                      <span>{item.number}</span>
                      <button style={{marginLeft:"15px"}} onClick={this.addNum.bind(this,item.id)}>++</button>
                      
                  </div>
              }):"购物车空空"
          }
          <div>
              <span>全选</span>
              <input type="checkbox" checked={this.props.checkAll} onChange={this.checkAll.bind(this)} />
              <span>总价格:{addNum}</span>
          </div>
      </div>
    )
  }
}
let mapStateToprops = (state)=>{
    console.log(state,77777);
    return {
        ...state.ShopReduer
    }
}
let mapDispatchToprops = (dispatch)=> bindActionCreators(action,dispatch)
export default connect(mapStateToprops,mapDispatchToprops)(Shopcar)